<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 局域网视频学习系统</title>
    <link rel="stylesheet" href="css/common.css">
    <style>
        body {
            background: linear-gradient(135deg, #4ECDC4 0%, #2E86AB 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .register-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            padding: 40px;
            width: 100%;
            max-width: 500px;
            margin: 20px;
        }

        .register-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .register-logo {
            width: 80px;
            height: 80px;
            background: var(--teacher-color);
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
            font-weight: bold;
        }

        .register-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--neutral-dark);
            margin-bottom: 8px;
        }

        .register-subtitle {
            color: #666;
            font-size: 14px;
        }

        .form-row {
            display: flex;
            gap: 15px;
        }

        .form-row .form-group {
            flex: 1;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--neutral-dark);
        }

        .form-label .required {
            color: var(--error-color);
        }

        .form-control {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--teacher-color);
            box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
        }

        .form-control.is-invalid {
            border-color: var(--error-color);
        }

        .form-control.is-valid {
            border-color: var(--success-color);
        }

        .register-btn {
            width: 100%;
            padding: 14px;
            background: var(--teacher-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .register-btn:hover {
            background: #3bb5ad;
            transform: translateY(-1px);
        }

        .register-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        .register-footer {
            text-align: center;
            color: #666;
            font-size: 14px;
        }

        .register-footer a {
            color: var(--teacher-color);
            text-decoration: none;
        }

        .register-footer a:hover {
            text-decoration: underline;
        }

        .role-selector {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .role-option {
            flex: 1;
            padding: 15px 10px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
        }

        .role-option:hover {
            border-color: var(--teacher-color);
        }

        .role-option.active {
            border-color: var(--teacher-color);
            background: rgba(78, 205, 196, 0.1);
            color: var(--teacher-color);
        }

        .role-option input[type="radio"] {
            display: none;
        }

        .role-option .role-icon {
            font-size: 24px;
            margin-bottom: 8px;
        }

        .role-option .role-name {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .role-option .role-desc {
            font-size: 12px;
            color: #666;
        }

        .loading {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid var(--teacher-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error-message {
            color: var(--error-color);
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .success-message {
            color: var(--success-color);
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .password-strength {
            margin-top: 5px;
            font-size: 12px;
        }

        .strength-bar {
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            margin-top: 5px;
            overflow: hidden;
        }

        .strength-fill {
            height: 100%;
            transition: all 0.3s ease;
            border-radius: 2px;
        }

        .strength-weak { background: var(--error-color); width: 25%; }
        .strength-medium { background: var(--warning-color); width: 50%; }
        .strength-strong { background: var(--success-color); width: 75%; }
        .strength-very-strong { background: var(--success-color); width: 100%; }

        @media (max-width: 600px) {
            .register-container {
                margin: 10px;
                padding: 30px 20px;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="register-header">
            <div class="register-logo">👥</div>
            <h1 class="register-title">用户注册</h1>
            <p class="register-subtitle">创建您的账户，开始学习之旅</p>
        </div>

        <form id="registerForm" data-validate>
            <div class="role-selector">
                <label class="role-option" for="role-admin">
                    <input type="radio" id="role-admin" name="role" value="0" required>
                    <div class="role-icon">👨‍💼</div>
                    <div class="role-name">管理员</div>
                    <div class="role-desc">系统管理</div>
                </label>
                <label class="role-option" for="role-teacher">
                    <input type="radio" id="role-teacher" name="role" value="1" required>
                    <div class="role-icon">👨‍🏫</div>
                    <div class="role-name">老师</div>
                    <div class="role-desc">上传课程视频</div>
                </label>
                <label class="role-option" for="role-student">
                    <input type="radio" id="role-student" name="role" value="2" required>
                    <div class="role-icon">👨‍🎓</div>
                    <div class="role-name">学生</div>
                    <div class="role-desc">观看学习视频</div>
                </label>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="username">用户名 <span class="required">*</span></label>
                    <input type="text" id="username" name="username" class="form-control" required>
                    <div class="error-message" id="username-error"></div>
                    <div class="success-message" id="username-success"></div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="name">真实姓名 <span class="required">*</span></label>
                    <input type="text" id="name" name="name" class="form-control" required>
                    <div class="error-message" id="name-error"></div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="password">密码 <span class="required">*</span></label>
                <input type="password" id="password" name="password" class="form-control" required>
                <div class="error-message" id="password-error"></div>
                <div class="password-strength" id="password-strength">
                    <div class="strength-bar">
                        <div class="strength-fill" id="strength-fill"></div>
                    </div>
                    <div id="strength-text">密码强度</div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="confirmPassword">确认密码 <span class="required">*</span></label>
                <input type="password" id="confirmPassword" name="confirmPassword" class="form-control" required>
                <div class="error-message" id="confirmPassword-error"></div>
            </div>

            <button type="submit" class="register-btn" id="registerBtn">
                <span class="loading" id="loading"></span>
                <span id="registerText">注册</span>
            </button>
        </form>

        <div class="register-footer">
            <p>已有账户？<a href="login.html">立即登录</a></p>
        </div>
    </div>

    <script src="js/common.js"></script>
    <script>
        // 角色选择
        document.querySelectorAll('input[name="role"]').forEach(radio => {
            radio.addEventListener('change', function() {
                document.querySelectorAll('.role-option').forEach(option => {
                    option.classList.remove('active');
                });
                this.closest('.role-option').classList.add('active');
            });
        });

        // 密码强度检测
        document.getElementById('password').addEventListener('input', function() {
            const password = this.value;
            const strengthFill = document.getElementById('strength-fill');
            const strengthText = document.getElementById('strength-text');
            
            let strength = 0;
            let strengthLabel = '';
            
            if (password.length >= 6) strength++;
            if (password.match(/[a-z]/)) strength++;
            if (password.match(/[A-Z]/)) strength++;
            if (password.match(/[0-9]/)) strength++;
            if (password.match(/[^a-zA-Z0-9]/)) strength++;
            
            strengthFill.className = 'strength-fill';
            
            if (strength <= 1) {
                strengthFill.classList.add('strength-weak');
                strengthLabel = '弱';
            } else if (strength <= 2) {
                strengthFill.classList.add('strength-medium');
                strengthLabel = '中等';
            } else if (strength <= 3) {
                strengthFill.classList.add('strength-strong');
                strengthLabel = '强';
            } else {
                strengthFill.classList.add('strength-very-strong');
                strengthLabel = '很强';
            }
            
            strengthText.textContent = `密码强度: ${strengthLabel}`;
        });

        // 用户名验证
        document.getElementById('username').addEventListener('blur', function() {
            const username = this.value.trim();
            const errorEl = document.getElementById('username-error');
            const successEl = document.getElementById('username-success');
            
            if (username) {
                if (!Utils.validateUsername(username)) {
                    this.classList.add('is-invalid');
                    this.classList.remove('is-valid');
                    errorEl.textContent = '用户名只能包含字母、数字、下划线，长度3-20位';
                    errorEl.style.display = 'block';
                    successEl.style.display = 'none';
                } else {
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                    errorEl.style.display = 'none';
                    successEl.textContent = '用户名格式正确';
                    successEl.style.display = 'block';
                }
            }
        });

        // 确认密码验证
        document.getElementById('confirmPassword').addEventListener('input', function() {
            const password = document.getElementById('password').value;
            const confirmPassword = this.value;
            const errorEl = document.getElementById('confirmPassword-error');
            
            if (confirmPassword) {
                if (password !== confirmPassword) {
                    this.classList.add('is-invalid');
                    this.classList.remove('is-valid');
                    errorEl.textContent = '两次输入的密码不一致';
                    errorEl.style.display = 'block';
                } else {
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                    errorEl.style.display = 'none';
                }
            }
        });

        // 表单提交
        document.getElementById('registerForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const registerData = {
                username: formData.get('username'),
                password: formData.get('password'),
                name: formData.get('name'),
                role: parseInt(formData.get('role'))
            };
            
            // 验证确认密码
            if (registerData.password !== formData.get('confirmPassword')) {
                Message.error('两次输入的密码不一致');
                return;
            }
            
            // 显示加载状态
            const registerBtn = document.getElementById('registerBtn');
            const loading = document.getElementById('loading');
            const registerText = document.getElementById('registerText');
            
            registerBtn.disabled = true;
            loading.style.display = 'inline-block';
            registerText.textContent = '注册中...';
            
            // 清除错误信息
            document.querySelectorAll('.error-message').forEach(el => {
                el.style.display = 'none';
            });
            document.querySelectorAll('.form-control').forEach(el => {
                el.classList.remove('is-invalid');
            });
            
            try {
                const response = await API.post('/user/register', registerData);
                
                if (response.success) {
                    Message.success('注册成功！请登录');
                    setTimeout(() => {
                        window.location.href = 'login.html';
                    }, 2000);
                } else {
                    Message.error(response.message || '注册失败');
                }
            } catch (error) {
                console.error('注册错误:', error);
                Message.error('注册失败：' + error.message);
            } finally {
                // 恢复按钮状态
                registerBtn.disabled = false;
                loading.style.display = 'none';
                registerText.textContent = '注册';
            }
        });

        // 表单验证
        document.getElementById('registerForm').addEventListener('input', function(e) {
            const input = e.target;
            const errorEl = document.getElementById(input.name + '-error');
            
            if (input.value.trim()) {
                if (input.name === 'username' && !Utils.validateUsername(input.value)) {
                    input.classList.add('is-invalid');
                    if (errorEl) {
                        errorEl.textContent = '用户名只能包含字母、数字、下划线，长度3-20位';
                        errorEl.style.display = 'block';
                    }
                } else if (input.name === 'password' && !Utils.validatePassword(input.value)) {
                    input.classList.add('is-invalid');
                    if (errorEl) {
                        errorEl.textContent = '密码至少6位';
                        errorEl.style.display = 'block';
                    }
                } else {
                    input.classList.remove('is-invalid');
                    if (errorEl) errorEl.style.display = 'none';
                }
            }
        });

        // 检查是否已登录
        if (UserManager.isLoggedIn()) {
            const user = JSON.parse(sessionStorage.getItem('user'));
            switch (user.role) {
                case 0:
                    window.location.href = 'admin/dashboard.html';
                    break;
                case 1:
                    window.location.href = 'teacher/dashboard.html';
                    break;
                case 2:
                    window.location.href = 'student/index.html';
                    break;
            }
        }
    </script>
</body>
</html>
